<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">七七团购活动明细</span>
          </div>
          <div style="display: flex">
            <el-button v-permission="['groupBuy.audit']" type="primary" v-show="form.status === 1||form.status===2" @click="auditOrderClick">结束团购</el-button>
<!--            <el-button v-permission="['groupBuy.audit']" v-show="form.status == 0"-->
<!--                       @click="releaseProduct" type="primary" size="mini">审核</el-button>-->
<!--            <el-button v-permission="['groupBuy.audit']" v-show="form.status == 1&&form.buyNum==0"-->
<!--                       @click="unAuditClick" type="primary" size="mini">取消审核</el-button>-->
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <div style="width: 450px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <span class="deleted_Row_Headings">团购名称：</span>
                <span class="deleted_OrderTitle">{{form.name}}</span>
              </div>
            </el-col>
            <!-- <el-col :span="8">
              <span class="deleted_Row_Headings">团购类型：</span>
              <span class="deleted_OrderTitle">{{form.type|watchType}}</span>
            </el-col> -->
            <el-col :span="8">
              <span class="deleted_Row_Headings">团购状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.statusDescr}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <!-- <el-col :span="8">
              <span class="deleted_Row_Headings">拼团人数：</span>
              <span class="deleted_OrderTitle">{{form.groupNum }}人成团</span>
            </el-col> -->
            <!-- <el-col :span="8">
              <span class="deleted_Row_Headings">有效单数：</span>
              <span class="deleted_OrderTitle">{{form.orderNum}}人有效</span>
            </el-col> -->
            <el-col :span="8">
              <span class="deleted_Row_Headings">拼团期数：</span>
              <span class="deleted_OrderTitle">第{{form.periodNum}}期</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">团购价格：</span>
              <span class="deleted_OrderTitle">{{form.price }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">市场价格：</span>
              <span class="deleted_OrderTitle">{{form.marketPrice }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">返还金币：</span>
              <span class="deleted_OrderTitle">{{form.point}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table
          :data="form.itemList"
          border

          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column
            label="商品名">
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="单位"
            width="70"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
            align="right"
            width="70">
          </el-table-column>
        </el-table>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">订单明细</span>
        </div>
        <el-table
          :data="orders"
          border

          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column label="开团日期"  prop="createDate">
            <template slot-scope="{row}">
              <span>{{row.createDate|datetimeFormatter}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="购买人数"
            width="220"
            prop="buyNum">
          </el-table-column>
          <el-table-column
            label="拼团人数"
            width="120"
          prop="groupNum">
          </el-table-column>
          <el-table-column
            label="团购期数"
            align="center"
            prop="periodNum"
          >

          </el-table-column>

          <el-table-column
            label="状态"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.status|watchBuy}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button  @click="toDo(scope.row)"  type="primary" size="mini">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-footer class="el-footerBox">
          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrderList(groupId)"  ></pagination>
        </el-footer>
      </div>
    </el-card>
    <el-dialog
      title="订单详情"
      :visible.sync="receiverVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="receiverClose">
      <div style="position: relative;height: 60vh;overflow: auto">
          <history :itemList="itemList"></history>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import history from '@/views/groupBuy/component/history'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Pagination from '@/components/Pagination';
  import { find, cancel, audit,unAudit,orderList,getOrderList } from '@/api/groupBuy'
  import permission from '@/directive/permission/index.js'
  import loadMore from '@/utils/loadMore'
  // 权限判断指令
  export default {
    name: 'groupBuy-view',
    data() {
      return {
        orders:[],
        pageNum:1,
        itemList:[],
        receiverVisible:false,
        pageSize:10,
        total:0,
        groupId: '',
        form: {
          id: ''

        }
      }
    },

    components:{Pagination,history},
    directives: {permission,elDragDialog},
    filters: {
      watchBuy(val) {
        if (val == 0) {
          return '未完成'
        } else if (val == 1) {
          return '已完成'

        }
      },
      watchStatus(val) {
        if (val == 0) {
          return '待审核'
        } else if (val == 1) {
          return '已审核'
        } else if (val == 2) {
          return '已完成'
        } else if (val == 3) {
          return '已结束'
        } else if (val == 4) {
          return '已关闭'
        }
      },
      watchType(val) {
        if (val == 0) {
          return '超值拼团'
        } else {
          return '红包拼团'
        }
      }
    },
    watch: {
      $route(newVal, oldVal) {
        console.log(oldVal)
        if (newVal.name == 'groupBuy-view' && newVal.query.id != this.form.id) {

          this.loadGroup(this.$route.query.id)
        }
      }
    },
    created() {

      this.form.id = this.$route.query.id
      this.loadGroup(this.form.id)
    },
    methods: {
      toDo(data){
          this.receiverVisible=true
        getOrderList({
          periodId:data.id
        }).then(res=>{
            this.itemList=res.data.orderItem
        })
      },
      receiverClose(){
        this.receiverVisible=false
      },
      unAuditClick(){
        var product={
          id:this.form.id,

        }
        this.$confirm('确认审核', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          unAudit(product).then(res=>{
            this.loadGroup(this.form.id)
          })
        })
      },
      releaseProduct(){
        var product={
          id:this.form.id,

        }
        this.$confirm('确认审核', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit(product).then(res=>{
            this.loadGroup(this.form.id)
          })
        })

      },
      loadOrderList(data){
        orderList({
          pageSize:this.pageSize,
          pageNum:this.pageNum,
          groupBuyId:data
        }).then(res=>{
          this.orders=res.data.data
          this.total=res.data.total
        })
      },
      auditOrderClick() {
        this.$confirm('确定结束？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel({
            id: this.groupId
          }).then(res => {
            this.loadGroup(this.form.id)
          })
        })

      },
      loadGroup(id) {
        find(id).then(res => {
          this.form = res.data.groupBuy
          this.groupId = res.data.groupBuy.itemList[0].groupBuyId
          this.loadOrderList(this.groupId)
        })
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
    /*white-space: nowrap;!*一行显示*!*/
    overflow: hidden; /*超出部分隐藏*/

    text-overflow: ellipsis; /*用...代替超出部分*/
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }

  /deep/ .el-form-item {
    margin-bottom: 0px;
  }

  /deep/ .el-dialog__body {
    padding-top: 0px;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
